import React, {Component} from "react";
import time, {currentTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";


class LeftMainData extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba', '#3298DB', '#FFB980', '#2EC7C9'];
  state = {

    chart: null,
    startTime: time.getStartOfDay(),
    endTime: time.getEndOfDay(),
    globalTime: {
      currentTime: null
    },
    // timeBetween: [time.getStartOfDay(), time.getEndOfDay()],

    option: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      grid: {
        left: '1%',
        right: '22.5%',
        bottom: '16%'
      },
      legend: {
        data: ['混合料水分', '混合料斗料重', '烧结机机速', '圆辊速度', '九辊速度', '点火温度']
      },
      xAxis: {
        type: 'category',
        splitLine: {
          show: false
        },
        data: []
      },
      yAxis: [
        {
          type: 'value',
          name: '混合料水分',
          nameTextStyle:{
            padding:[0,0,15,0]
          },
          min: 0,
          max: 20,
          position: 'right',
          axisLine: {
            lineStyle: {
              color: this.colors[0]
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '混合料斗料重',
          min: 0,
          max: 100,
          position: 'right',
          offset: 50,
          splitLine: {show: false},
          axisLine: {
            lineStyle: {
              color: this.colors[1]
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '烧结机机速',
          nameTextStyle:{
            padding:[0,0,15,0]
          },
          min: 0,
          max: 3,
          offset: 100,
          splitLine: {show: false},
          position: 'right',
          axisLine: {
            lineStyle: {
              color: this.colors[2]
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '圆辊速度',
          position: 'right',
          offset: 150,
          min: 0,
          max: 75,
          splitLine: {show: false},
          axisLine: {
            lineStyle: {
              color: this.colors[3]
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '九辊速度',
          nameTextStyle:{
            padding:[0,0,15,0]
          },
          min: 0,
          max: 850,
          position: 'right',
          offset: 200,
          splitLine: {show: false},
          axisLine: {
            lineStyle: {
              color: this.colors[4]
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '点火温度',
          min: 1000,
          max: 1300,
          position: 'right',
          offset: 250,
          splitLine: {show: false},
          axisLine: {
            lineStyle: {
              color: this.colors[5]
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        },
      ],
      series: [
        {
          name: '混合料水分',
          type: 'line',
          yAxisIndex: 0,
          color:this.colors[0],
          data: []
        },
        {
          name: '混合料斗料重',
          type: 'line',
          yAxisIndex: 1,
          color:this.colors[1],
          data: []
        },
        {
          name: '烧结机机速',
          type: 'line',
          yAxisIndex: 2,
          color:this.colors[2],
          data: []
        },
        {
          name: '圆辊速度',
          type: 'line',
          yAxisIndex: 3,
          color:this.colors[3],
          data: []
        },
        {
          name: '九辊速度',
          type: 'line',
          yAxisIndex: 4,
          color:this.colors[4],
          data: []
        },
        {
          name: '点火温度',
          type: 'line',
          yAxisIndex: 5,
          color:this.colors[5],
          data: []
        },
      ]
    }
  };

  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    this.state.chart = echarts.init(document.getElementById("leftMainData"));
    // 绘制图表
    this.state.chart.setOption(this.state.option);
    addResizeHook(this, this.state.chart.resize)
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {mainData, globalTime, hasParent} = nextProps;

    if (mainData !== undefined && mainData !== null && prevState.chart !== null) {
      prevState.option.xAxis.data = mainData.DateTime;
      prevState.option.series[0].data = mainData.CG_SJ_SJJ_SJ02_HHLSF;
      prevState.option.series[1].data = mainData.CG_SJ_SJJ_SJ02_HHLDLZ;
      prevState.option.series[2].data = mainData.CG_SJ_SJJ_SJ02_SJJXS;
      prevState.option.series[3].data = mainData.CG_SJ_SJJ_SJ02_YGJXS;
      prevState.option.series[4].data = mainData.CG_SJ_SJJ_SJ02_JGJXS;
      prevState.option.series[5].data = mainData.CG_SJ_SJJ_SJ02_DHWD;
      prevState.chart.setOption(prevState.option);
    }
    // if (globalTime && hasParent && prevState.globalTime.currentTime !== globalTime.currentTime) {
    //   return {
    //     startTime: new Date(globalTime.currentTime.valueOf() - 60 * 1000),
    //     endTime: globalTime.currentTime,
    //     globalTime: {
    //       currentTime: globalTime.currentTime
    //     }
    //   }
    // }
    //state 不需要更改
    return null
  }


  render() {
    const {
      width = 100,
      height = 300
    }
      = this.props;
    return (

      <div>
        <div id="leftMainData" style={{width: `${width}%`, height}}/>
      </div>
    )
  }
}


export default LeftMainData;

